<template>
  <div class="wrapper">
    <div class="search" @click="toSearch"><span>输入店铺名称搜索</span></div>
    <div class="content">
      <div class="select">
        <uni-collapse accordion="true">
          <uni-collapse-item
            @select="changeCommercial"
            :title="item.commercialName"
            :item="item"
            :index="index"
            v-for="(item, index) in allType"
            :key="item.id"
          >
            <view
              class="select-item"
              :class="currentCommercial === index && 'active'"
              v-for="(items, indez) in item.children"
              :key="items.id"
              @click.stop="selectType(items, indez)"
            >
              <text :class="indez === current && 'current-text'">
                {{ items.commercialName }}
              </text>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </div>

      <div class="main">
        <u-dropdown ref="uDropdown" active-color="#000">
          <u-dropdown-item :title="floor">
            <view class="floor">
              <view class="floor-box">
                <view
                  class="item"
                  v-for="(item, index) in allFloor"
                  :key="item.label"
                  @click="changeFloor(item, index)"
                  :class="currentFloor === index && 'active'"
                >
                  {{ item.label }}
                </view>
              </view>
            </view>
          </u-dropdown-item>
        </u-dropdown>
        <Merchant :list="list" @load="load"></Merchant>
      </div>
    </div>
  </div>
</template>

<script>
import Merchant from './component/merchant'
import { findJointOrderStore, getShopType } from '@/api'
import { allFloor } from '@/api/local-data.js'
import formatType from '@/utils/formatType'

Object.freeze(allFloor)
export default {
  components: {
    Merchant
  },
  data() {
    return {
      allType: [],
      allFloor,
      currentCommercial: 0,
      currentFloor: 0,
      commercial: '全部分类',
      current: 0,
      floor: '全部楼层',
      list: [],
      page: 1,
      size: 10,
      count: ''
    }
  },
  created() {
    this.getJointOrderStore()
    this.getShopTypes()
  },
  methods: {
    load() {
      if (this.count != this.list.length) {
        this.page++
        this.getJointOrderStore()
      }
    },
    selectType(e, index) {
      this.current = index
      this.page = 1
      this.list = []
      this.commercial = e.commercialCode
      this.getJointOrderStore()
    },
    changeCommercial(item, index) {
      this.page = 1
      this.list = []
      this.currentCommercial = index
      this.commercial = item.commercialCode
      this.current = 0
      this.getJointOrderStore()
    },
    changeFloor(item, index) {
      this.currentFloor = index
      this.floor = item.label
      this.page = 1
      this.list = []
      this.getJointOrderStore()
    },
    getJointOrderStore() {
      findJointOrderStore(
        this.commercial,
        this.floor,
        this.page,
        this.size
      ).then(res => {
        this.count = res.data.count
        this.list = [...this.list, ...res.data.result]
      })
    },
    getShopTypes() {
      getShopType().then(res => {
        this.allType = formatType(res)
      })
    },
    toSearch() {
      uni.navigateTo({
        url: '/pages/package/coupon-discount/component/search'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .search {
    padding: 10px;
    background: #f4f4f4;
    span {
      display: block;
      color: rgb(66, 63, 63);
      width: 90%;
      padding: 8px;
      margin: 0 auto;
      background: #fff;
      height: 20px;
      border-radius: 12rpx;
    }
  }

  .content {
    flex: 1;
    display: flex;
    overflow: hidden;
    .select {
      -webkit-overflow-scrolling: touch;
      overflow-y: scroll;
      width: 220rpx;
      display: flex;
      flex-direction: column;
      background: rgba(126, 120, 120, 0.151);

      .active {
        background: #fff;
      }
    }
    .select-item {
      padding: 20rpx 0;
      color: rgb(147, 147, 155);
      // text-align: center;
      text-indent: 50rpx;
      padding: 30rpx 0;
      background: #f1f1f1 !important;
      .current-text {
        color: #000;
      }
    }
    .main {
      flex: 1;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      u-dropdown {
        position: absolute;
        top: 112rpx;
        width: 530rpx;
        height: 80rpx;
        background: #fff;
      }
      .floor {
        background: #ffffff;
        padding: 30rpx;
        .floor-box {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .item {
            border: 1px solid rgb(173, 177, 184);
            color: #000;
            padding: 12rpx 0;
            border-radius: 24rpx;
            margin-top: 30rpx;
            width: 180rpx;
            text-align: center;
            font-size: 32rpx;
          }
          .active {
            color: #ffffff;
            background: rgb(189, 191, 192);
          }
        }
      }
    }
  }
}
</style>
